<template>
  <!-- 文字下拉菜单 -->
  <div class="demo demo-basc">
    <div class="demo-inner-divider">文字下拉菜单</div>
    <e-dropdown>
      <a href="javascript:void(0)">
        更多
      </a>
      <template #list>
        <e-dropdown-menu>
          <e-dropdown-item
            v-for="selection in selections1"
            :key="selection.name"
            :disabled="selection.disabled"
          >
            {{ selection.name }}
          </e-dropdown-item>
          <e-dropdown-item style="background-color:#F5F8FF">hover选项</e-dropdown-item>
        </e-dropdown-menu>
      </template>
    </e-dropdown>
    <!-- <e-dropdown style="margin-left: 40px">
      <e-button type="text" size="small">
        <span style="color:#555">更多</span>
      </e-button>
      <template #list>
        <e-dropdown-menu>
          <e-dropdown-item>选项一</e-dropdown-item>
          <e-dropdown-item disabled>不可选项</e-dropdown-item>
          <e-dropdown-item style="background-color:#F5F8FF">hover选项</e-dropdown-item>
        </e-dropdown-menu>
      </template>
    </e-dropdown> -->
  </div>
  <!-- 按钮下拉菜单 -->
  <div class="demo demo-basc">
    <div class="demo-inner-divider">按钮下拉菜单</div>
    <e-dropdown trigger="click">
      <e-button type="secondary" size="small" >
        <span>···</span>
      </e-button>
      <template #list>
        <e-dropdown-menu>
          <e-dropdown-item>选项一</e-dropdown-item>
          <e-dropdown-item disabled>不可选项</e-dropdown-item>
          <e-dropdown-item style="background-color:#F5F8FF">hover选项</e-dropdown-item>
        </e-dropdown-menu>
      </template>
    </e-dropdown>
    <e-dropdown style="margin-left: 40px" trigger="click">
      <e-button type="secondary" size="small">
        <span>全部</span>
        <e-icon type="chevron-down"></e-icon>
      </e-button>
      <template #list>
        <e-dropdown-menu>
          <e-dropdown-item>选项一</e-dropdown-item>
          <e-dropdown-item disabled>不可选项</e-dropdown-item>
          <e-dropdown-item style="background-color:#F5F8FF">hover选项</e-dropdown-item>
        </e-dropdown-menu>
      </template>
    </e-dropdown>
  </div>
  <!-- 带分割线下拉菜单 -->
  <div class="demo demo-basc">
    <div class="demo-inner-divider">带分割线下拉菜单</div>
    <e-dropdown>
      <a href="javascript:void(0)">
        更多
        <e-icon type="chevron-down"> </e-icon>
      </a>
      <template #list>
        <e-dropdown-menu>
          <e-dropdown-item>选项一</e-dropdown-item>
          <e-dropdown-item disabled>不可选项</e-dropdown-item>
          <e-dropdown-item style="background-color:#F5F8FF">hover选项</e-dropdown-item>
          <e-dropdown-item divided>选项二</e-dropdown-item>
        </e-dropdown-menu>
      </template>
    </e-dropdown>
  </div>
  <!-- 触发方式 -->
  <div class="demo demo-trigger">
    <div class="demo-inner-divider">触发方式</div>
    <e-dropdown>
      <a href="javascript:void(0)">
        hover 触发
        <e-icon type="chevron-down"> </e-icon>
      </a>
      <template #list>
        <e-dropdown-menu>
          <e-dropdown-item>驴打滚</e-dropdown-item>
          <e-dropdown-item>炸酱面</e-dropdown-item>
          <e-dropdown-item>豆汁儿</e-dropdown-item>
          <e-dropdown-item >冰糖葫芦</e-dropdown-item>
          <e-dropdown-item>北京烤鸭</e-dropdown-item>
        </e-dropdown-menu>
      </template>
    </e-dropdown>
    <e-dropdown trigger="click" style="margin-left: 20px" @on-click="clickItem">
      <a
        href="javascript:void(0)">
        click 触发
        <e-icon type="chevron-down"> </e-icon>
      </a>
      <template #list>
        <e-dropdown-menu >
          <e-dropdown-item name="lv" :selected="selected==='lv'">驴打滚</e-dropdown-item>
          <e-dropdown-item name="zha" :selected="selected==='zha'" >炸酱面</e-dropdown-item>
          <e-dropdown-item name="dou" :selected="selected==='dou'">豆汁儿</e-dropdown-item>
          <e-dropdown-item name="bing" :selected="selected==='bing'">冰糖葫芦</e-dropdown-item>
          <e-dropdown-item name="bei" :selected="selected==='bei'">北京烤鸭</e-dropdown-item>
        </e-dropdown-menu>
      </template>
    </e-dropdown>
    <e-dropdown trigger="contextMenu" style="margin-left: 20px">
      <a href="javascript:void(0)">
        right click
        <e-icon type="chevron-down"> </e-icon>
      </a>
      <template #list>
        <e-dropdown-menu>
          <e-dropdown-item>返回</e-dropdown-item>
          <e-dropdown-item style="color: #ed4014">删除</e-dropdown-item>
        </e-dropdown-menu>
      </template>
    </e-dropdown>
    <e-dropdown trigger="custom" :visible="visible" style="margin-left: 20px">
      <a href="javascript:void(0)" @click="handleOpen">
        custom 触发
        <e-icon type="chevron-down"> </e-icon>
      </a>
      <template #list>
        <e-dropdown-menu>
          <p>常用于各种自定义下拉内容的场景。</p>
          <div style="text-align: right; margin: 10px">
            <e-button type="primary" @click="handleClose">关闭</e-button>
          </div>
        </e-dropdown-menu>
      </template>
    </e-dropdown>
  </div>

  <!-- placement -->
  <div class="demo demo-placement">
    <div class="demo-inner-divider">placement</div>
    <e-dropdown placement="bottom-end">
      <a href="javascript:void(0)">
        菜单(左)
        <e-icon type="chevron-down"> </e-icon>
      </a>
      <template #list>
        <e-dropdown-menu>
          <e-dropdown-item>驴打滚</e-dropdown-item>
          <e-dropdown-item>炸酱面</e-dropdown-item>
          <e-dropdown-item>豆汁儿</e-dropdown-item>
          <e-dropdown-item>冰糖葫芦</e-dropdown-item>
          <e-dropdown-item>北京烤鸭</e-dropdown-item>
        </e-dropdown-menu>
      </template>
    </e-dropdown>
    <e-dropdown style="margin-left: 20px">
      <a href="javascript:void(0)">
        菜单(居中)
        <e-icon type="chevron-down"> </e-icon>
      </a>
      <template #list>
        <e-dropdown-menu>
          <e-dropdown-item>驴打滚</e-dropdown-item>
          <e-dropdown-item>炸酱面</e-dropdown-item>
          <e-dropdown-item>豆汁儿</e-dropdown-item>
          <e-dropdown-item>冰糖葫芦</e-dropdown-item>
          <e-dropdown-item>北京烤鸭</e-dropdown-item>
        </e-dropdown-menu>
      </template>
    </e-dropdown>
    <e-dropdown style="margin-left: 20px" placement="bottom-start">
      <a href="javascript:void(0)">
        菜单(右)
        <e-icon type="chevron-down"> </e-icon>
      </a>
      <template #list>
        <e-dropdown-menu>
          <e-dropdown-item>驴打滚</e-dropdown-item>
          <e-dropdown-item>炸酱面</e-dropdown-item>
          <e-dropdown-item>豆汁儿</e-dropdown-item>
          <e-dropdown-item>冰糖葫芦</e-dropdown-item>
          <e-dropdown-item>北京烤鸭</e-dropdown-item>
        </e-dropdown-menu>
      </template>
    </e-dropdown>
  </div>
  <!-- 嵌套用法 -->
  <div class="demo demo-nested">
    <div class="demo-inner-divider">嵌套</div>
    <e-dropdown>
      <a href="javascript:void(0)">
        北京小吃
        <!-- <e-icon type="ios-arrow-down"></e-icon> -->
        <e-icon type="chevron-down"> </e-icon>
      </a>
      <template #list>
        <e-dropdown-menu>
          <e-dropdown-item>驴打滚</e-dropdown-item>
          <e-dropdown-item>炸酱面</e-dropdown-item>
          <e-dropdown-item>豆汁儿</e-dropdown-item>
          <e-dropdown placement="right-start">
            <e-dropdown-item>
              北京烤鸭
              <!-- <e-icon type="ios-arrow-forward"></e-icon> -->
              <e-icon type="chevron-right" size="10"> </e-icon>
            </e-dropdown-item>
            <template #list>
              <e-dropdown-menu>
                <e-dropdown-item>挂炉烤鸭</e-dropdown-item>
                <e-dropdown-item>焖炉烤鸭</e-dropdown-item>
              </e-dropdown-menu>
            </template>
          </e-dropdown>
          <e-dropdown-item>冰糖葫芦</e-dropdown-item>
        </e-dropdown-menu>
      </template>
    </e-dropdown>
  </div>
  <dropdownMd class="markdown-body mg-t-20"></dropdownMd>
</template>
<script>
import dropdownMd from '../../docs/dropdown.md'
export default {
  data() {
    return {
      visible: false,
      selected:'',
      selections1: [
        { name: '选项一'},
        { 
          name: '不可选项',
          disabled: true
        },
      ],
    }
  },
  components: {
    dropdownMd,
  },
  methods: {
    handleOpen() {
      this.visible = true
    },
    handleClose() {
      this.visible = false
    },
    clickItem(item){
      this.selected=item
    }
  },
}
</script>
<style scoped>
.demo {
  margin: 50px 10px;
};
</style>
